<!DOCTYPE html>
<html>
  <head>
      <link rel="stylesheet" href="tree.css">
      <link rel="stylesheet" href="demo.css">
      <link rel="stylesheet" href="icons/css/font-awesome.min.css">
  </head>
  <body>
      <input type="text" placeholder="current title" id="current-input">
      <input type="text" placeholder ="new title" id="new-input">
      <button onclick="go()">RENAME</button>
      <div id="container">

      </div>

      <script src="jquery.js"></script>
      <script src="orange-tree.js"></script>

      <script>
      var tree = new orangeTree("#container");

      var folder1 = tree.addBranch({
        folder: true,
        title: "folder1"
      });
      tree.addBranch({
        path: folder1.path,
        title: "file1"
      });
      var folder2 = tree.addBranch({
        path: folder1.path,
        folder: true,
        title: "folder2"
      });
      tree.addBranch({
        path: folder2.path,
        title: "file2"

      });

      function go(){
        var current = $("#current-input").val();
        var new_title = $("#new-input").val();

        var arr = tree.getByTitle(current);
        for(var i = 0; i < arr.length; i++){
          var id = arr[i].id;
          tree.rename(id, new_title);
        }
      }
      </script>
  </body>
</html>
